
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'img.jsp' starting page</title>
     <meta  http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  <style>
  body{
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  position: relative;
  }
  #dom{
  width: 99%;
  height: 100%;
/*   border: 1px solid #000; */
  }
  .left{
  width: 30%;
  height: 100%;
  border-radius:20px;
  border-right:2px solid rgba(204,204,204,.5);
  float: left;
  }
  .right{
  width: 30%;
  height: 100%;
  border-radius:20px;
  border-left:2px solid rgba(204,204,204,.5);
  float: right;
  
  }
 .top{
  width: 38%;
  height: 40%;
  margin-left: 5px;
  border: 1px solid rgba(204,204,204,.5);
  border-radius:20px;
  float: left;
  }
  .bottom{
  width: 38%;
  height: 60%;
  margin-top: -2%;
  margin-left: 5px;
/*   border: 1px solid rgba(204,204,204,.5); */
  border-radius:20px;
  float: left;
  background-image:url("img/0000.png"); 
  background-position: center;
    background-repeat: no-repeat;
  background-size:cover;
  font-family: "宋体";
  }
  .img{
  width: 60%;
  height: 50%;
  margin: 0% auto;
  border:1px solid rgba(204,204,204,.5);
  border-radius:20px;
  background-image:url("img/4444.png"); 
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
  }
  .img img{
  display:block;
  width: 38%;
  height: 60%;
  margin: 5% 20%;
  border-radius:50%;
  }
  .left_top{
  width: 73%;
  height: 30%;
  position: relative;
  background-image:url("img/008.png"); 
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
  right:73%;
  }
  .left_bot{
  position: absolute;
  width: 20%;
  height: 75%;
  bottom: -75%;
  background-image:url("img/54.png"); 
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
  }
  .left_bo{
  position: absolute;
  width: 6%;
  height: 15%;
  bottom: 60%;
  left: -15%;
  background-image:url("img/666.png"); 
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
  }
  .left_or{
  position: absolute;
  width: 8%;
  height: 16%;
  bottom: -16%;
  left: 17%;
  background-image:url("img/123.png"); 
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
  }
  .right_top{
  width: 10%;
  height: 12%;
  position: absolute;
  top: -10%;
  right: 19%;
  transform:rotate(-23deg);
  background-image:url("img/33.png"); 
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
  }
  .right_bo input[type='button']{
	outline-style:none;
	text-align:center;
	cursor:pointer;
	border-radius:5px;
	border: 0px solid #99CCFF;
	background-color: rgba(72, 201, 176,0);
  width: 70%;
  height: 20%;
  margin-left: 10%;
  margin-top: 45%;
  background-size:cover;
  }
    a{
  display:block;
  text-decoration: none;
  text-align:center;
	border-radius:5px;
	border: 0px solid #99CCFF;
	background-color: rgba(72, 201, 176,0);
  width: 70%;
  height: 20%;
  margin-left: 10%;
  margin-top: 45%;
    font-size:1em;
  color:#000;
  background-size:cover;
  }
  .right_bot{
  width: 8%;
  height: 27%;
  background-image:url("img/222.png"); 
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0%;
  right: 20%;
  background-size:cover;
  }
  .right_bott{
  width: 16%;
  height: 30%;
  background-image:url("img/026.png"); 
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  bottom: -30%;
  right: 4%;
  background-size:cover;
  }
  .right_bo{
  width: 12%;
  height: 25%;
  background-image:url("img/3556.png"); 
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 2%;
  right: -12%;
  background-size:cover;
  }
      .wt{
    width: 100%;
    height: 100%;
   /*  border:1px solid #000; */
    background-image: url("img/2.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-top: -5%;
    }
    .tx{
    width: 80%;
    height: 60%;
    border-radius:20px;
    border:0px solid #000;
    outline-style: none;
    padding-left: 15px;
    font-size: 1em;
    margin: 8% 10%;
    resize:none;
    background-color: transparent;
    }
    .butdiv{
    width: 100%;
    height: 13%;
    margin-top: 6%;
/*     border: 1px solid #000; */ 
   }
    .butdiv input[type='button']{
    display: block;
    background-image: url("img/b2.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    outline-style:none;
	text-align:center;
	cursor:pointer;
	border-radius:5px;
	border: 0px solid #99CCFF;
	background-color: rgba(72, 201, 176,0);
    width: 18%;
    height: 70%;
    float: left;
    }
  </style>
  <body>
   	<div id="dom">
   	<div class="left">
   	<div class="left_top"></div>
   	<div class="left_bot"></div>
   	<div class="left_bo"></div>
   	<div class="left_or"></div>
   	</div>
   	<div class="right">
   	<div class="right_top"></div>
   	<div class="right_bo"><a  href="boy.html">简单的线条</a></div>
   	<div class="right_bot"></div>
   	<div class="right_bott"></div>
   	</div>
   	<div class="top">
   	<div class="img"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2883553801,1114766774&fm=27&gp=0.jpg"></div>
   	</div>
   	<div class="bottom">
   	<div class="butdiv"><input type="button" value="发布"><input type="button" value="是否匿名"><input type="button" value="其他选项"></div>
   <div class="wt" ><!-- 鑸炲彴 -->
	<textarea class="tx" placeholder=" 	写点东西吧">
	
	
	</textarea>
	</div>
   	</div>
   	</div>
  </body>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
  $(".left_top").animate({right:"0"});
  $(".left_bot").animate({bottom:"0"});
  $(".left_bo").animate({left:"15%"});
  $(".left_or").animate({bottom:"0"});
  
  $(".right_top").animate({top:"10%"});
  $(".right_bo").animate({right:"2%"});
  $(".right_bot").animate({right:"15%"});
  $(".right_bott").animate({bottom:"30%"});
  // margin: 9% auto;
  $(".img").animate({margin:"9% auto"});
  $(".tx").val("");
	var sb=[1,2,3,4,5,6,1,2,3,45,3]
	var count=5;
	arr(sb,count);
	
  	function arr(sb,count){
  		var st=[]
		var temp=0;
		for (var i = 0; i < count; i++) {
			var num=parseInt(Math.random()*10);
			console.log("num:"+num);
			//temp=sb[num];
			//console.log("temp:"+temp);
			if(st.indexOf(num)=="-1"){
			st[temp]=num;
			temp++;
			}
		}
		console.log(st.toString());
  	}
  </script>
</html>
